import React, { useEffect } from "react"
import * as echarts from 'echarts/core';
import styles from './index.module.less'
import {
    LineChart,
    // 系列类型的定义后缀都为 SeriesOption
    LineSeriesOption,
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
    LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LegendComponent
]);

let chart = null

const Lines = (props) => {
    const {data} = props
    useEffect(() => {

        const chart = echarts.init(document.getElementById('chart_line'));
        if (chart) {
            let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
            let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30,];
            const options: LineSeriesOption<ECOption> = {
                backgroundColor: 'transparent',
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         lineStyle: {
                //             color: 'rgb(126,199,255)',
                //         },
                //     },
                // },
                legend: {
                    show: true,
                    top: '8%',
                    left:'33%',
                    itemWidth: 30, // 图例标记的图形宽度。
                    //   itemGap: 20, // 图例每项之间的间隔。
                    itemHeight: 10, //  图例标记的图形高度。
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                        padding: [0, 8, 0, 8]
                    },
                
                },
                grid: {
                    top: '22%',
                    left: '5%',
                    right: '1%',
                    bottom: '5%',
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: 'rgb(41,188,245)',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#233653',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xLabel,
                    },
                ],
                yAxis: [
                    {
                        name: "",
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 12,
                            padding: [0, 60, 0, 0]
                        },
                        // minInterval: 1,
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1160a0',
                                type: 'dashed'
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008de7',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '接入IP数',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: '#0E9CFF', // 线条颜色
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff',//拐点颜色
                                borderColor: '#0E9CFF',//拐点边框颜色
                                borderWidth: 2,//拐点边框大小
                                label: {
                                    show: true, //开启显示
                                    color: '#fff',
                                    position: 'top', //在上方显示
                                    formatter: function (res) {
                                        if (res.value) {
                                            return res.value
                                        } else {
                                            return 0
                                        }
                                    },
                                },
                            },

                        },
                        symbolSize: 8,   //设定实心点的大小
                        areaStyle: {
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: '#0E9CFF',
                                        },
                                        // {
                                        //     offset: 0.8,
                                        //     color: '#ffffff00',
                                        // },
                                        {
                                            offset: 1,
                                            color: 'rgba(14,156,255,0)',
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        data: dataValue,
                    },
                    {
                        name: '认证IP数',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: '#0DFFBE', // 线条颜色
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff',//拐点颜色
                                borderColor: '#0DFFBE',//拐点边框颜色
                                borderWidth: 2,//拐点边框大小
                                label: {
                                    show: true, //开启显示
                                    color: '#fff',
                                    position: 'top', //在上方显示
                                    formatter: function (res) {
                                        if (res.value) {
                                            return res.value
                                        } else {
                                            return 0
                                        }
                                    },
                                },
                            },

                        },
                        symbolSize: 8,   //设定实心点的大小
                        areaStyle: {
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: '#0DFFBE',
                                        },
                                        // {
                                        //     offset: 0.8,
                                        //     color: '#ffffff00',
                                        // },
                                        {
                                            offset: 1,
                                            color: 'rgba(13,255,190,0)',
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        data: dataValue1,
                    }
                ]
            }
            chart.setOption(options)
        }
    }, [data])
    return (
        <div className={styles.chart_line}>
            <div id="chart_line" className={styles.chart_line} style={{pointerEvents:'none'}}></div>
        </div>
    )
}

export default Lines